<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模型显示</title>
		<link href="{{ url_for('static',filename='css/2.css') }}" rel="stylesheet">
		<script src="{{ url_for('static',filename='jquery.js') }}"></script>
		<script>
		$(document).ready(function() {
		  var intervalId = setInterval(function() {
		    $.ajax({
		      url: '/send',
		      success: function(data) {
		        var bat = data.bat;
			    $('#battery_value').html(bat + '%');
		        const batteryLevelElement = $('#battery_level');
				batteryLevelElement.css('width', bat + '%');
		      }
		    });
		  }, 1000);
		});
		</script>
	</head>
	<body>
		<header class="head">
			<img src="{{ url_for('static',filename='img/header.jpg') }}" height="100%" id="header_img">
			<div id="NAME">ARROGANT</div>
			<table border="0" class="bat">
				<tr>
					<td>
						<img src="{{ url_for('static',filename='img/drone.png') }}" id="drone">
					</td>
					<td>
						<div id="battary_container">
							<div id="battery_level"></div>
						</div>
					</td>
					<td>
						<div id="battery_value"></div>
					</td>
				</tr>
			</table>
		</header>
		<div class="main">
			<div class="another-container">
				<h3 style="color:rgb(46, 211, 233);">为新生而生</h3>
				<h1>小飞机，大梦想</h1>
			</div>
			<table class="img-container">
				<tr>
					<td>
						<div class="iframe-container">
							<iframe src="{{ url_for('index3') }}" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
						</div>
					</td>
					<td>
						<img src="{{ url_for('GREY') }}" width="100%">
					</td>
					<td>
						<img src="{{ url_for('BW') }}" width="100%">
					</td>
				</tr>
			</table>
			<table class="img-name-container">
				<tr>
					<td>
						<h3>3D模型</h3>
					</td>
					<td>
						<h3>灰度图像</h3>
					</td>
					<td>
						<h3>二值图像</h3>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>